<template>
  <div>
    <div class="circular" v-show="isLoading">
      <svg class="anim-rotate" width="40" height="40">
        <circle class="anim-circle" cx="20" cy="20" r="13" fill="#fff" stroke="#72a5ef" stroke-width="3"></circle>
      </svg>
    </div>
    <div class="no-tips" v-if="!hasNews">
      <img :src="noTipsImg">
      <p>暂时还没有消息哦</p>
    </div>
    <ul class="lists" ref="lists" v-else>
      <li v-for="(list, index) in lists" :key="index">
        <p class="time">{{list.send_time}}</p>
        <section class="box">
          <i class="iconfont close icon-close2" @click="del" :data-id="list.msg_id"></i>
          <h3>{{list.title}}</h3>
          <img :src="list.img" v-if="list.img !== ''">
          <p class="content">{{list.content}}</p>
          <router-link :to="'/mine/news/' + list.msg_id" class="iconfont icon-more hairlines-top">
            查看详情
          </router-link>
        </section>
      </li>
    </ul>
    <footer class="fixed-footer">
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  import $ from 'edom'
  import noTips from './img/notips.png'
  export default {
    name: 'news',
    data () {
      return {
        title: '消息列表',
        noTipsImg: noTips,
        hasNews: true,
        page: 1,
        maxPage: 1,
        busy: false,
        distance: 10,
        isLoading: false,
        curScrollTop: 0,
        lists: []
      }
    },
    methods: {
      getMsgs () {
        if (this.page > this.maxPage) {
          window.removeEventListener('scroll', this.scrollEvent)
          return
        }
        this.isLoading = true
        this.axios.post('/api/user/message', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          pages: this.page
        })
        .then((res) => {
          let data = res.data
          this.isLoading = false
          if (data.code !== 1 && this.page === 1) {
            this.isLoading = false
            this.hasNews = false
            return
          } else if (data.code !== 1 && this.page !== 1) {
            this.isLoading = false
            this.hasNews = true
            this.maxPage = 0
            return
          }
          let desc = data.desc
          let len = desc.length
          for (let i = 0; i < len; i++) {
            desc[i].send_time = $().timeTransform(desc[i].send_time)
          }
          this.maxPage = data.max_page
          this.page++
          this.lists = desc.concat(this.lists)
          this.busy = false
          this.$nextTick(() => {
            this.listsHeight = this.listEle.offsetHeight + this.marginBottom
            if (this.page === 2) {
              document.body.scrollTop = this.listsHeight - this.wHeight
            } else {
              document.body.scrollTop = this.listsHeight - this.curScrollTop
            }
          })
        })
      },
      del (event) {
        this.isLoading = true
        let target = event.target
        let mid = target.getAttribute('data-id')
        let listsDom = this.$refs.lists.getElementsByTagName('li')
        let theLi = target.parentNode.parentNode
        let index = Array.prototype.indexOf.call(listsDom, theLi)
        this.axios.post('/api/user/delete', {
          msg_id: mid,
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        })
        .then((res) => {
          theLi.classList.add('anim-hide')
          setTimeout(() => {
            this.lists.splice(index, 1)
            theLi.classList.remove('anim-hide')
            this.isLoading = false
          }, 400)
        })
      },
      scrollAuto () {
        window.addEventListener('scroll', this.scrollEvent)
      },
      scrollEvent () {
        let scrollTop = document.body.scrollTop
        if (scrollTop < this.distance && !this.busy) {
          this.busy = true
          this.curScrollTop = this.listsHeight - scrollTop
          this.getMsgs()
        }
      },
      back () {
        this.$router.go(-1)
      }
    },
    created () {
      document.documentElement.style.background = '#f5f5f5'
      this.setTitle(this.title)
      this.getMsgs()
    },
    mounted () {
      this.listEle = this.$refs.lists
      this.wHeight = window.innerHeight
      this.marginBottom = parseInt(window.getComputedStyle(this.listEle).marginBottom)
    },
    updated () {
      if (this.page === 2) {
        this.$nextTick(() => {
          this.scrollAuto()
          this.singleLiHeight = this.$refs.lists.getElementsByTagName('li')[0].offsetHeight
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .lists{
    margin-bottom: rem(100);
    padding: 0 rem(24);
    background: #f5f5f5;
    li{
      margin-bottom: rem(10);
      .time{
        padding: rem(25) 0;
        font-size: rem(22);
        color: #808080;
        text-align: center;
      }
      .box{
        position: relative;
        padding: rem(24) rem(24) 0;
        background: #fff;
        .close{
          position: absolute;
          top: 15px;
          right: 15px;
          font-size: 12px;
          color: #999;
        }
        h3{
          padding: rem(30) 0;
          font-size: rem(30);
          color: #333;
          font-weight: 700;
        }
        img{
          display: block;
          width: 100%;
        }
        .content{
          margin: rem(15) 0;
          font-size: rem(26);
          color: #999;
          line-height: 150%;
        }
        a{
          display: block;
          height: rem(70);
          line-height: rem(70);
          font-size: rem(28);
          color: #666;
          &:before{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            color: #666;
            font-size: 12px;
          }
        }
      }
    }
  }
  .no-tips{
    padding-top: rem(140);
    img{
      display: block;
      margin: 0 auto rem(40) auto;
      width: rem(257);
      height: rem(257);
    }
    p{
      font-size: rem(28);
      color: #333;
      text-align: center;
    }
  }
  .circular{
    position: fixed;
    z-index: 999;
    top: rem(40);
    left: 50%;
    margin-left: rem(-35);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
    background: #fff;
  }
</style>
